<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

        li{
            list-style-type: none;/* 去掉li前的点 */
            float: left;/*将li设置成做浮动，变为联动*/
        }
        a{
            display: block;/*将a变成块状*/
            width: 220px;/*设置块的宽度*/
            height: 50px;/*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 50px;/*设置字体在块中的高度*/
            background-color: #2f4f4f;
            margin: 0px 0px;/*块里的高宽通过margin设置*/
            color: #fff;
            text-align: center;/*字体居中*/
            text-decoration: none;/*去掉下划线*/
            font-size: 15px;
        }
        a:hover{
            background-color: #2f6f4f;
        }


        .wrap {
            width: 100%;
            height: 100px;
            display: flex;
            flex-wrap: wrap;
        }
        .wrap-item {
            width: 12.5%;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .data {
            display: inline-block;
            margin-right: 20px;
            width: 40%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .chart {
            width: 600px;
            height: 500px;
        }

        input {
            margin: 0 20px 0 10px;
            width: 100px;
            font-size: 15px;
            height: 25px;
            line-height: 25px;
        }
        button {
            margin-left: 20px;
            width: 60px;
            height: 30px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div >
    <ul class=daohang>
        <li><a th:href="@{/}">首页</a></li>
        <li><a th:href="@{/selectList}">所有数据</a ></li>
        <li><a th:href="@{/deleteAll}">清空数据</a ></li>
        <li><a th:href="@{/huabu1}">运行轨迹</a ></li>
        <li><a th:href="@{/PID}">调PID</a ></li>
        <li><a th:href="@{/stop_start}">启动停止</a ></li>
        <li><a th:href="@{/picture1}">散点图1</a ></li>
        <li><a th:href="@{/picture2}">散点图2</a ></li>
    </ul>
</div>


<br>
<br>
<br>
<br>
<br>
<br>



<div id="app">

    <!-- 最新一行数据 -->
    <div style="display: flex; align-items: flex-start">
        <!-- 散点图 -->
        <div ref="scatterChart" class="chart"></div>
    </div>
</div>
<script th:inline="javascript">
    var app = new Vue({
        el: "#app",
        data: {
            origin_x: 0,
            origin_y: 0,
            offset_x: 110,
            offset_y: 90,
            timer: null, // 提示定时器
            isUpdate: true, // 是否修改成功
            dataLi: [], // [x值,y值]
            curData: [], // 存放最新一行数据
            formData: {
                // pid数据
                p: 0,
                i: 0,
                d: 0,
            },
        },
        methods: {
            // 开启提示定时器
            tipStart() {
                this.timer = setTimeout(() => {
                    this.timer = null;
                }, 1000);
            },
        },
        mounted() {


                axios.get("http://47.106.85.109:8081/picture11").then((res) => {

                    if (res.data) {
                        for (var i=0;i<res.data.length;i++)
                        {
                            const rawData = res.data[i];
                            this.curData = rawData;
                            // 处理得到[x,y]坐标值
                            const x=rawData[0];
                            const y=rawData[1];
                            this.origin_x = x;
                            this.origin_y = y;
                            this.dataLi.push([x, y]);

                            // 更新散点图
                            this.scatterChart.setOption({
                                series: [{ data: this.dataLi }],
                            });
                        }

                    }
                });





            // 散点图
            this.scatterChart = echarts.init(this.$refs.scatterChart);
            const option = {
                title: {
                    text: "散点图1",
                    top: "5%",
                },
                tooltip: {},
                grid: {
                    top: "20%",
                    bottom: "20%",
                },
                animation: false,
                xAxis: {
                    name: "位移x",
                    type: "value",
                    // scale: true,
                },
                yAxis: {
                    name: "位移y",
                    type: "value",
                    // scale: true,
                },
                series: [
                    {
                        type: "scatter",
                        data: this.dataLi,
                        tooltip: {
                            formatter: "{c}",
                        },
                        itemStyle: {
                            color: "skyblue",
                        },
                    },
                ],
            };
            this.scatterChart.setOption(option);
        },
    });
</script>
</body>
</html>
